/**
 * 滚动动画
 * 需要动画的父元素 加上 animation='bounceIn,0.15' 属性, 注: animation='动画名称,延迟:默认0.2s'
 * 需要动画的子元素 加上class animate-item
 */
function handleScroll() {
  var section = document.querySelectorAll('[animation]');

  for (var idx = 0; idx < section.length; idx++) {
    var box = section[idx];
    var animation = box.getAttribute('animation').split(',');
    var animate = animation[0];
    var delay = animation[1] || 0.15;
    var boxRect = box.getBoundingClientRect();

    if (window.innerHeight > boxRect.top && boxRect.bottom > 100 && window.innerHeight - boxRect.top > 300) {
      var items = box.querySelectorAll('.animate-item');

      for (var itemIdx = 0; itemIdx < items.length; itemIdx++) {
        var item = items[itemIdx];
        item.style['animation-delay'] = itemIdx * delay + 's';
        item.classList.add('animated', animate);
      }

      box.removeAttribute('animation');
    }
  }
}

window.onload = function () {
  window.addEventListener('scroll', handleScroll);
  handleScroll();
};